import React, { Component } from 'react';
import ReactDOM from 'react-dom';

// 类式组件
/*class Demo extends Component {

    state = {count: 0}

    myRef = React.createRef()

    add = () => {
        this.setState((state) => {
            return ({count: state.count + 1})
        })
    }

    // 清除组件 
    unmount = () => {
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }

    show = () => {
        alert(this.myRef.current.value)
    }

    componentDidMount() {
        this.timer = setInterval(()=>{
            this.setState(state => ({
                count: state.count + 1
            }))
        }, 100000)
    }


    componentWillUnmount() {
        clearInterval(this.timer)
    }



    render() {
        return (
            <div>
                <h2>当前求和:{this.state.count}</h2>
                <input type='text' ref={this.myRef} />
                <button onClick={this.add}>+1</button>
                <button onClick={this.unmount}>卸载组件</button>
                <button onClick={this.show}>点击展示输入</button>
            </div>
        );
    }
}*/

function Demo() {

    // 像类式写法那种，初始化state状态
    const [count, setCount] = React.useState(0) // 返回一个数组[数据状态,更新状态的方法],,,也不会因为再次调用把原来的覆盖掉
    
    const myRef = React.createRef()

    // 用于监测状态的函数，第二个参数：是存监测哪些状态类似componentDidMount，，
    // 如果都不传则表示监测所有状态，，，类似componentDidUpdate
    // 如果传递一个空数组表示都不监测
    // 如果状态发送改变则调用该函数，能达到类似类式编程的生命钩子函数的效果
    React.useEffect(()=>{
        let timer = setInterval(()=>{
            setCount(count => count + 1)
        }, 1000)
        // 这个return，相当于类式编程的componentWillUnmount，清除组件后调用的
        return ()=>{
            clearInterval(timer)
        }
    }, [])

    function add () {
        // 第一种写法
        // setCount(count + 1)

        // 第二种写法
        setCount((count)=>{
            return (count+1)
        })
    }

    function unmount() {
        ReactDOM.unmountComponentAtNode(document.getElementById('root'))
    }

    function show() {
        alert(myRef.current.value)
    }

    return (
        <div>
            <h2>当前求和:{count}</h2>
            <input type='text' ref={myRef} />
            <button onClick={add}>+1</button>
            <button onClick={unmount}>卸载组件</button>
            <button onClick={show}>点击展示输入</button>
        </div>
    );
}

export default Demo
